import '../public/index'
import url from '../data/url'
import request from '../data/request'
import { tableConfig, header } from '../data/config'
import store from 'store'

const base             = url.base,
      getBuildList     = request.getBuildList,
      getDeveloperList = request.getDeveloperList,
      getChannelList   = request.getChannelList,
      getAreaByDev     = request.getAreaByDev;

let table,
    storeData;

// 初始化表格
table = $('#table').bootstrapTable($.extend({}, tableConfig, {
  url: base + getBuildList,
  queryParams: function (params) {
    return $.extend({
        currentPage: params.pageNumber,
        pageSize: params.pageSize
      }, $('#searchForm').serializeObject()
    )
  },
  columns: [
    {
      field: 'propertyName',
      title: '楼盘名称',
      valign: 'middle'
    }, {
      field: 'developerName',
      title: '开发商名称',
      valign: 'middle'
    }, {
      field: 'picName',
      title: '负责人',
      valign: 'middle'
    }, {
      field: 'channel',
      title: '渠道配置',
      valign: 'middle'
    }, {
      field: 'serviceTypeCN',
      title: '服务类型',
      valign: 'middle'
    }, {
      field: 'action',
      valign: 'middle',
      align: 'center',
      width: '120px',
      title: '操作',
      formatter: function (index, row) {
        return `<div class="btn-group">
                  <button type="button" data-id="${ row.idStr }" class="btn btn-default btn-detail">详情</button>
                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" >
                    <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu pull-right">
                    <li>
                      <a data-id="${ row.idStr }" class="btn-modify" href="#">修改信息</a>
                    </li>
                    <li role="separator" class="divider"></li>
                    <li>
                      <a data-id="${ row.idStr }" class="btn-convert" href="#">转化楼盘</a>
                    </li>
                  </ul>
                </div>`
      }
    }]
}));

// 点击列表的时候传递数据到全局变量
table.on('click-row.bs.table', (e, data, el) => {
  storeData = data
})

// 初始化开发商
getDev();

// 初始化渠道
getChannel()

// 动态加载区域
$('#developersId').on('change', () => {
  let developersId = $('#developersId').children('option:selected').val();

  getArea(developersId)
});

function getDev () {

  $.ajax({
    headers: header,
    url: base + getDeveloperList
  })
    .done(function (res) {
      console.log(res)

      let code = res.code;

      if (code === 0) {
        console.log("获取开发商成功")

        let project = $('#developersId'),
            html    = '<option value="">请选择</option>',
            i       = 0,
            data    = res.object,
            len     = data.length;

        for (; i < len; i++) {
          html += `<option value="${data[i].enterInfo ? data[i].enterInfo.idStr : ''}">${data[i].enterInfo ? data[i].enterInfo.enterpriseName : ''}</option>`;
        }

        project.html(html)
        project.selectize()
      } else {
        layer.msg('获取开发商失败', {
          icon: 5
        })
      }
    })
    .fail(function (res) {
      console.log(res)
      console.log("error")

    })
    .always(function (res) {
      console.log("complete")
    })
}

function getArea (developersId) {
  let project = $('#areaId');

  if (!developersId) {
    project.html('<option value="">请选择</option>')
    return
  }

  $.ajax({
    headers: header,
    type: 'GET',
    url: base + getAreaByDev,
    data: { developersId: developersId }
  })
    .done(function (res) {
      console.log(res)

      let code = res.code;

      if (code === 0) {
        console.log("获取区域成功")

        let html = '<option value="">请选择</option>',
            i    = 0,
            data = res.object,
            len  = data.length;

        for (; i < len; i++) {
          html += `<option value="${ data[i].idStr }">${ data[i].areaName }</option>`
        }

        project.html(html)
      } else {
        project.html('<option value="">请选择</option>')
      }
    })
    .fail(function (res) {
      console.log(res)
      console.log("error")
      let project = $('#buildingId')
      project.html('<option value="">请选择</option>')

    })
    .always(function (res) {
      console.log("complete")
    })
}

function getChannel () {

  $.ajax({
    headers: header,
    url: base + getChannelList
  })
    .done(function (res) {
      console.log("初始化渠道 success")
      console.log(res)

      let channel = $('#chanelId'),
          html    = '<option value="">请选择</option>',
          i       = 0,
          data    = res.object,
          len     = data.length

      for (; i < len; i++) {
        html += `<option value="${ data[i].channelCode }">${ data[i].channelName }</option>`
      }

      channel.html(html)
    })
    .fail(function (res) {
      console.log(res)

      layer.msg('渠道获取失败', {
        icon: 5
      })

      console.log("error")
    })
    .always(function (res) {

      console.log("complete")
    })

}

// 搜索
$('#search-btn').on('click', (e) => {
  e.preventDefault();

  table.bootstrapTable('refresh', {
    query: $.extend({
      currentPage: 1,
    }, $('#searchForm').serializeObject())
  })
});

//跳转至修改页
$(document).on('click', '#table .btn-modify', (e) => {
  e.preventDefault()

  console.log('修改')
  store.set('storeData', storeData)

  window.location.href = `./modify.html?id=${ storeData.id }`
});

//跳转至详情页
$(document).on('click', '#table .btn-detail', (e) => {
  e.preventDefault()

  console.log('详情')
  store.set('storeData', storeData)

  window.location.href = `./detail.html?id=${ storeData.id }`
});

//跳转至转换楼盘
$(document).on('click', '#table .btn-convert', (e) => {
  e.preventDefault()

  console.log('转换楼盘')

  let id = $(e.target).attr('data-id');

  window.location.href = `./convert.html?id=${ id }`
});